import React, { Component } from 'react'
import './index.css'
import PubSub from 'pubsub-js'
export default class List extends Component {
  state = {
    isFirst: true,
    loading: false,
    error: '',
    avatars: []
  }
  componentDidMount() {
    this.token = PubSub.subscribe('getData', (_, stateObj) => {
      console.log('List接收的数据', stateObj);
      this.setState(stateObj)
    })
  }
  componentWillUnmount() {
    console.log('componentWillUnmount---');
    PubSub.unsubscribe(this.token)
  }
  render() {
    const { isFirst, loading, error, avatars } = this.state

    return (
      <div className="row">
        {isFirst ? <h2>search to show the users</h2> :
          loading ? <h2>loading</h2> :
            error ? <h2>{error}，出错了</h2> :
              avatars.map(item => {
                return (
                  <div className="card" key={item.id}>
                    <a href={item.html_url} target="_blank" rel="noreferrer">
                      <img alt="avater" src={item.avatar_url} style={{ width: '100px' }} />
                    </a>
                    <p className="card-text">{item.login}</p>
                  </div>
                )
              })
        }
      </div>
    )
  }
}
